<template>
  <div class="forgot-password-container">
    <!-- 背景动画元素 -->
    <div class="animated-bg">
      <div v-for="n in 5" :key="n" class="animated-shape"></div>
    </div>

    <div class="forgot-password-content">
      <!-- 左侧品牌区域 -->
      <div class="brand-section">
        <div class="brand-content">
          <div class="logo-container">
            <div class="logo-circle">
              <div class="logo-inner"></div>
            </div>
          </div>
          <h1 class="brand-name">EON Mind</h1>
          <p class="brand-slogan">重置您的密码</p>
          <div class="brand-features">
            <div class="feature-item">
              <el-icon class="feature-icon"><Lock /></el-icon>
              <span>安全验证</span>
            </div>
            <div class="feature-item">
              <el-icon class="feature-icon"><Message /></el-icon>
              <span>邮箱验证</span>
            </div>
            <div class="feature-item">
              <el-icon class="feature-icon"><Key /></el-icon>
              <span>重置密码</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧表单区域 -->
      <div class="form-box">
        <div class="form-container">
          <h2 class="form-title">忘记密码</h2>
          <p class="form-subtitle">请验证您的身份信息以重置密码</p>

          <el-form
            :model="resetForm"
            :rules="resetRules"
            ref="resetFormRef"
            label-width="0"
            class="reset-form"
          >
            <el-form-item prop="email">
              <el-input
                v-model="resetForm.email"
                placeholder="邮箱地址"
                class="custom-input"
              >
                <template #prefix>
                  <el-icon class="input-icon"><Message /></el-icon>
                </template>
              </el-input>
            </el-form-item>

          

            <el-form-item prop="verificationCode">
              <div class="verification-input-group">
                <el-input
                  v-model="resetForm.verificationCode"
                  placeholder="邮箱验证码"
                  class="custom-input verification-input"
                >
                  <template #prefix>
                    <el-icon class="input-icon"><Message /></el-icon>
                  </template>
                </el-input>
                <el-button
                  type="primary"
                  :loading="sendCodeLoading"
                  :disabled="!resetForm.email || sendCodeDisabled"
                  @click="handleSendVerificationCode"
                  class="send-code-btn"
                >
                  {{ sendCodeText }}
                </el-button>
              </div>
            </el-form-item>

            <el-form-item prop="newPassword">
              <el-input
                v-model="resetForm.newPassword"
                type="password"
                placeholder="新密码"
                show-password
                class="custom-input"
              >
                <template #prefix>
                  <el-icon class="input-icon"><Lock /></el-icon>
                </template>
              </el-input>
            </el-form-item>

            <el-form-item prop="confirmPassword">
              <el-input
                v-model="resetForm.confirmPassword"
                type="password"
                placeholder="确认新密码"
                show-password
                class="custom-input"
              >
                <template #prefix>
                  <el-icon class="input-icon"><Lock /></el-icon>
                </template>
              </el-input>
            </el-form-item>

            <el-form-item>
              <el-button
                type="primary"
                :loading="resetLoading"
                @click="handleResetPassword"
                class="submit-button"
                :disabled="!isFormValid"
              >
                重置密码
              </el-button>
            </el-form-item>

            <div class="back-to-login">
              <router-link to="/login" class="back-link">返回登录</router-link>
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage, ElForm } from 'element-plus'
import {
  Lock,
  Message,
  Iphone,
  Key,
} from '@element-plus/icons-vue'
import { sendUpdateVerificationCode, updatePassword } from '../api/user'
import { useRouter } from 'vue-router'

const router = useRouter()
const resetFormRef = ref()
const resetLoading = ref(false)
const sendCodeLoading = ref(false)
const sendCodeDisabled = ref(false)
const sendCodeText = ref('发送验证码')
const countDown = ref(0)

// 重置密码表单
const resetForm = reactive({
  email: '',
  phoneNumber: '',
  verificationCode: '',
  newPassword: '',
  confirmPassword: '',
})

// 表单验证规则
const resetRules = {
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' },
  ],
  phoneNumber: [
    { required: true, message: '请输入手机号码', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码格式', trigger: 'blur' },
  ],
  verificationCode: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    { len: 6, message: '验证码长度为6位', trigger: 'blur' },
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能少于6个字符', trigger: 'blur' },
  ],
  confirmPassword: [
    { required: true, message: '请确认新密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== resetForm.newPassword) {
          callback(new Error('两次输入的密码不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur',
    },
  ],
}

// 判断表单是否有效
const isFormValid = computed(() => {
  return (
    resetForm.email &&
    resetForm.verificationCode &&
    resetForm.newPassword &&
    resetForm.confirmPassword &&
    resetForm.newPassword === resetForm.confirmPassword
  )
})

// 处理发送验证码
const handleSendVerificationCode = async () => {
  if (!resetForm.email) {
    ElMessage.warning('请先输入邮箱')
    return
  }

  // 验证邮箱格式
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  if (!emailRegex.test(resetForm.email)) {
    ElMessage.warning('请输入正确的邮箱格式')
    return
  }

  try {
    sendCodeLoading.value = true
    
    await sendUpdateVerificationCode({ email: resetForm.email })
    
    ElMessage.success('验证码已发送，请查收邮箱')
    
    // 开始倒计时
    startCountDown()
  } catch (error) {
    ElMessage.error(error.message || '发送验证码失败，请稍后再试')
  } finally {
    sendCodeLoading.value = false
  }
}

// 开始倒计时
const startCountDown = () => {
  countDown.value = 60
  sendCodeDisabled.value = true
  
  const timer = setInterval(() => {
    countDown.value--
    sendCodeText.value = `${countDown.value}s后重发`
    
    if (countDown.value <= 0) {
      clearInterval(timer)
      sendCodeDisabled.value = false
      sendCodeText.value = '发送验证码'
    }
  }, 1000)
}

// 处理重置密码
const handleResetPassword = async () => {
  if (!resetFormRef.value) return

  await resetFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        resetLoading.value = true

        // 准备重置参数
        const { confirmPassword, ...resetParams } = resetForm

        // 调用重置密码API
        await updatePassword(resetParams)

        ElMessage.success('密码重置成功，请使用新密码登录')

        // 跳转到登录页面
        router.push('/login')
      } catch (error) {
        ElMessage.error(error.message || '密码重置失败，请稍后再试')
      } finally {
        resetLoading.value = false
      }
    }
  })
}
</script>

<style scoped>
.forgot-password-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
  overflow: hidden;
}

/* 动画背景 */
.animated-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.animated-shape {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  animation: float 15s infinite ease-in-out;
}

.animated-shape:nth-child(1) {
  width: 200px;
  height: 200px;
  top: 10%;
  left: 10%;
  animation-delay: 0s;
}

.animated-shape:nth-child(2) {
  width: 300px;
  height: 300px;
  top: 60%;
  left: 15%;
  animation-delay: 2s;
}

.animated-shape:nth-child(3) {
  width: 150px;
  height: 150px;
  top: 30%;
  right: 15%;
  animation-delay: 4s;
}

.animated-shape:nth-child(4) {
  width: 250px;
  height: 250px;
  bottom: 10%;
  right: 20%;
  animation-delay: 6s;
}

.animated-shape:nth-child(5) {
  width: 180px;
  height: 180px;
  top: 40%;
  left: 45%;
  animation-delay: 8s;
}

@keyframes float {
  0% {
    transform: translateY(0) translateX(0) rotate(0);
    opacity: 0.5;
  }
  50% {
    transform: translateY(-20px) translateX(20px) rotate(180deg);
    opacity: 0.8;
  }
  100% {
    transform: translateY(0) translateX(0) rotate(360deg);
    opacity: 0.5;
  }
}

/* 内容区 */
.forgot-password-content {
  display: flex;
  width: 1000px;
  max-height: 85vh;
  min-height: 600px;
  background-color: rgba(255, 255, 255, 0.98);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 32px 64px -12px rgba(0, 0, 0, 0.4);
  position: relative;
  z-index: 1;
  backdrop-filter: blur(20px);
}

/* 左侧品牌区域 */
.brand-section {
  flex: 1.2;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  padding: 60px 40px;
  position: relative;
  overflow: hidden;
}

.brand-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, 
    rgba(102, 126, 234, 0.9) 0%, 
    rgba(118, 75, 162, 0.9) 100%);
  z-index: 1;
}

.brand-content {
  text-align: center;
  position: relative;
  z-index: 2;
}

.logo-container {
  margin-bottom: 40px;
}

.logo-circle {
  width: 120px;
  height: 120px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  animation: pulse 3s infinite;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.logo-inner {
  width: 80px;
  height: 80px;
  background: white;
  border-radius: 50%;
  position: relative;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.logo-inner:before {
  content: '';
  position: absolute;
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  70% {
    box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    transform: scale(1);
  }
}

.brand-name {
  font-size: 42px;
  font-weight: 800;
  margin: 0 0 20px;
  background: linear-gradient(to right, #ffffff, #f0f0f0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  letter-spacing: 2px;
}

.brand-slogan {
  font-size: 18px;
  margin-bottom: 50px;
  opacity: 0.95;
  font-weight: 300;
  letter-spacing: 1px;
}

.brand-features {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 40px;
}

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  opacity: 0.9;
  transition: all 0.3s ease;
}

.feature-item:hover {
  opacity: 1;
  transform: translateY(-5px);
}

.feature-icon {
  font-size: 28px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.feature-item:hover .feature-icon {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.1);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.feature-item span {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* 右侧表单区域 */
.form-box {
  flex: 1;
  padding: 50px 60px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-y: auto;
  max-height: 85vh;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.9) 100%);
}

.form-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 20px;
  min-height: 0;
}

.form-title {
  font-size: 32px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 12px;
  text-align: center;
}

.form-subtitle {
  color: #6b7280;
  margin-bottom: 40px;
  font-size: 16px;
  text-align: center;
  font-weight: 400;
}

.reset-form {
  width: 100%;
}

.reset-form .el-form-item {
  margin-bottom: 24px;
}

.custom-input :deep(.el-input__wrapper) {
  padding: 16px 20px;
  height: 48px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  border: 1px solid #e5e7eb;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.8);
}

.custom-input :deep(.el-input__wrapper:hover) {
  border-color: #667eea;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
}

.custom-input :deep(.el-input__wrapper.is-focus) {
  border-color: #667eea;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

.input-icon {
  font-size: 20px;
  color: #9ca3af;
}

/* 验证码输入组件样式 */
.verification-input-group {
  display: flex;
  gap: 10px;
  align-items: center;
}

.verification-input {
  flex: 1;
}

.verification-input :deep(.el-input__wrapper) {
  height: 48px;
}

.send-code-btn {
  width: 120px;
  height: 48px;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 12px;
  color: white;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.send-code-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.submit-button {
  width: 100%;
  padding: 16px;
  font-size: 16px;
  font-weight: 600;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.submit-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

.submit-button:disabled {
  background: linear-gradient(135deg, #d1d5db, #9ca3af);
  cursor: not-allowed;
  box-shadow: none;
}

.back-to-login {
  text-align: center;
  margin-top: 24px;
}

.back-link {
  color: #667eea;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.back-link:hover {
  color: #4f46e5;
  text-decoration: underline;
}

/* 响应式调整 */
@media (max-width: 1000px) {
  .forgot-password-content {
    width: 95%;
    max-width: 900px;
    margin: 0 auto;
  }
  
  .brand-section {
    padding: 40px 30px;
  }
  
  .form-box {
    padding: 40px 40px;
  }
}

@media (max-width: 768px) {
  .forgot-password-content {
    width: 90%;
    height: auto;
    flex-direction: column;
    max-height: none;
  }

  .brand-section {
    flex: none;
    min-height: 300px;
    padding: 30px;
  }
  
  .brand-name {
    font-size: 32px;
  }
  
  .brand-slogan {
    font-size: 16px;
  }

  .form-box {
    flex: none;
    padding: 30px 20px;
    max-height: none;
  }
  
  .form-container {
    padding: 0 10px;
  }
}
</style> 